import {Homepage} from "../../../App";
import React from "react";
import ReactDom from 'react-dom';
import ReactMarkdown from 'react-markdown';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
import rehypeRaw from 'rehype-raw';
import rehypeStringify from 'rehype-stringify';
import remarkGfm from 'remark-gfm';

class AlgorithmBase{
  constructor(id='AlgorithmBase')
  {
    this.id          = id;
    this.name        = '';
    this.description = '';
    // 图/表，训练和测试DOM对象
    let domElementList = {};
    domElementList.description  = document.getElementById('description');
    domElementList.input        = document.getElementById('input');
    domElementList.output       = document.getElementById('output');
    domElementList.model        = document.getElementById('model');
    domElementList.test         = document.getElementById('test');

    this.domElementList = domElementList;
    this.homepage       = `/${Homepage}`;
  }
  // 重置所有数据集和UI
  reset(){
    this.clear();
  }
  // 初始化训练集和测试集，和模型，必要时给定初值
  init(){ 
    this.clear();
  }

  initUIs(){
    this.initDescriptionUI();
    this.initModelUI();
    this.initInputUI();
    this.initOutputUI();
    this.initTestUI();
  }
  initDescriptionUI(){
    const descriptionDiv = document.createElement('div');
    this.domElementList.description.appendChild(descriptionDiv);
    this.descriptionDiv  = descriptionDiv;
  }
  initModelUI(){
    const modelDiv = document.createElement('div');
    this.domElementList.model.appendChild(modelDiv);
    this.modelDiv  = modelDiv;
  }
  initInputUI(){
    const inputDiv = document.createElement('div');
    this.domElementList.input.appendChild(inputDiv);
    this.inputDiv  = inputDiv;
  }
  initOutputUI(){
    const outputDiv = document.createElement('div');
    this.domElementList.output.appendChild(outputDiv);
    this.outputDiv  = outputDiv;
  }
  initTestUI(){
    const testDiv = document.createElement('div');
    this.domElementList.test.appendChild(testDiv);
    this.testDiv  = testDiv;
  }

  // 清除DOM数据
  clear(){
    for (let key in this.domElementList) {
      if(this.domElementList[key]){
        this.domElementList[key].innerText = '';
      }
    }

    this.initUIs();
  }

  // 添加一个按钮
  // 父节点 按钮名字 点击事件
  addButton(parent, text, onclick, id='', name=''){
    const button     = document.createElement('button');
    button.id        = id;
    button.name      = name;
    button.innerText = text;
    button.onclick   = onclick;
    parent.appendChild(button);

    return button;
  }
  // 添加一个DIV
  addDiv(parent){
    const div     = document.createElement('div');
    parent.appendChild(div);

    return div;
  }
  //
  addCanvas(parent){
    const canvas     = document.createElement('canvas');
    canvas.style.width = "800px"
    canvas.style.height = "500px"
    parent.appendChild(canvas);

    return canvas;
  }
  // 添加一个换行
  addBr(parent){
    const br = document.createElement("br");  
    parent.appendChild(br); 

    return br
  }
  // 添加一个label
  addLabel(parent, str=''){
    const label     = document.createElement('label');
    label.innerText = str;
    parent.appendChild(label);

    return label;
  }
  // 添加浮点输入框
  addFloatInput(parent, value=0.00, onchange, step=0.01){
    const input = document.createElement('input');
    input.type  = 'number';
    input.value = value;
    input.step  = step;
    input.onchange = onchange;
    parent.appendChild(input);

    return input;
  }
  // 渲染md文本到页面
  reandMD(txt, el){
    ReactDom.unmountComponentAtNode(el);
    ReactDom.render(
      <ReactMarkdown
        children={txt}
        remarkPlugins={[remarkMath, remarkGfm]}
        rehypePlugins={[rehypeKatex, rehypeRaw ,rehypeStringify]}
      />,
      el
    )
  }
}

export default AlgorithmBase;